<template>
	<view class="custom">
		<u-navbar
			title="初级实名认证" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page">
			<view class="item flex-a">
				<view class="label">
					真实姓名
				</view>
				<view>
					{{info.name}}
				</view>
			</view>
			<view class="item flex-a">
				<view class="label">
					身份证号
				</view>
				<view>
					{{info.id_number}}
				</view>
			</view>
			<view class="item flex-a">
				<view class="label">
					手 机 号
				</view>
				<view>
					{{info.phone}}
				</view>
			</view>
			<view class="item flex-a" v-if="info.timelimit">
				<view class="label">
					有 效 期
				</view>
				<view>
					{{info.timelimit}}
				</view>
			</view>
			<view class="tip">
				您提供的信息仅作为淘京收实名认证使用,
				<view>
					我们不会泄露用户任何隐私！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAuthDetail } from '@/api';
	import { systemInfo } from '@/utils/mixin';

	export default {
		mixins:[systemInfo],
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			this.getSystemInfo();
			this.loadAuthDetail();
		},
		methods: {
			async loadAuthDetail() {
				const res = await getAuthDetail();
				this.info = res.data;
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 0 10px 0;
	
	.item {
	    position: relative;
	    font-size: 13px;
	    color: #6f6f6f;
	    height: 52px;
	    line-height: 52px;
	    border-bottom: 1px solid #f1f1f1;
		
		.label {
		    width: 72px;
		}
	}
	
	.tip {
	    margin: 31px 0 0;
	    font-size: 11px;
	    text-align: center;
	    color: #ccc;
	    line-height: 20px;
	}
}
</style>
